<!doctype html>
<!-- paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/ -->
<!--[if lt IE 7]> <html class="no-js ie6 oldie" lang="en" xmlns:ng="http://angularjs.org" xmlns:ngl="http://ngl.com"> <![endif]-->
<!--[if IE 7]>    <html class="no-js ie7 oldie" lang="en" xmlns:ng="http://angularjs.org" xmlns:ngl="http://ngl.com"> <![endif]-->
<!--[if IE 8]>    <html class="no-js ie8 oldie" lang="en" xmlns:ng="http://angularjs.org" xmlns:ngl="http://ngl.com"> <![endif]-->
<!-- Consider adding an manifest.appcache: h5bp.com/d/Offline -->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en" xmlns:ng="http://angularjs.org" xmlns:ngl="http://ngl.com"> <!--<![endif]-->
<head>
  <meta charset="utf-8">

  <!-- Use the .htaccess and remove these lines to avoid edge case issues.
       More info: h5bp.com/b/378 -->
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

  <title>Nightingale</title>
  <meta name="description" content="">
  <meta name="author" content="">

  <!-- Mobile viewport optimized: j.mp/bplateviewport -->
  <meta name="viewport" content="width=device-width,initial-scale=1">

  <!-- Place favicon.ico and apple-touch-icon.png in the root directory: mathiasbynens.be/notes/touch-icons -->

  <!-- CSS: implied media=all -->
  <!-- CSS concatenated and minified via ant build script-->
  <link rel="stylesheet" href="/public/stylesheets/bootstrap.css">
  <link href="/public/stylesheets/screen.css" media="screen, projection" rel="stylesheet" type="text/css" />
  <link href="/public/stylesheets/print.css" media="print" rel="stylesheet" type="text/css" />
  <!--[if IE]>
      <link href="/public/stylesheets/stylesheets/ie.css" media="screen, projection" rel="stylesheet" type="text/css" />
  <![endif]-->
  <!-- end CSS-->

  <!-- More ideas for your <head> here: h5bp.com/d/head-Tips -->

  <!-- All JavaScript at the bottom, except for Modernizr / Respond.
       Modernizr enables HTML5 elements & feature detects; Respond is a polyfill for min/max-width CSS3 Media Queries
       For optimal performance, use a custom Modernizr build: www.modernizr.com/download/ -->
  <script src="/public/javascripts/libs/modernizr-2.0.6.min.js"></script>

</head>

<body>
<div id="nav-container" class="clearfix" >
	<div id="logo">
        <a href="#" alt="Nightingale Logo">
            <img src="public/images/ngl.png" alt="Nigthingale"/>
        </a>
    </div>
	<nav id="nav" ng:controller="MainCtrl">
        <ul>
			<li class="dd rounded" data-dropdown="dropdown">
				<a href="#" class="dd-toggle">Playlists</a>
				<ul class="dd-menu">
					<li><a href="#mostliked/0">Most Liked</a></li>
					<li><a href="#mostdisliked/0">Most Disliked</a></li>
				</ul>
			</li>
			<li ng:show="user.name" class="dd rounded" data-dropdown="dropdown">
				<a href="#" class="dd-toggle">Logged in as <em style="color: white;">{{user.name}}</em></a>
				<ul class="dd-menu">
					<li><a href="#my-playlists">My Playlists</a></li>
					<!--<li><a href="#">Account settings</a></li>-->
					<li><a href="#logout">Logout</a></li>
				</ul>
            </li>
			<li ng:hide="user.name" class="dd rounded" data-dropdown="dropdown">
				<a href="#" class="dd-toggle">Signup/Login</a>
				<ul class="dd-menu">
                    <li>
                        <a href="#signup">Sing Up!</a>
                    </li>
                    <li>
                        <a href="#login">Login</a>
                    </li>
				</ul>
            </li>
		</ul>
    <div id="search-container">
        <form id="search" ng:controller="SearchFormCtrl" ng:submit="sub()">
            <input class="inp" type="text" placeholder="Search..." name="search" />
            <input class="btn" type="submit" value="Search" />
        </form>
    </div>
	</nav>

</div>
<div id="player-container">
	<div id="video-container"><div id="videoDiv">Loading...</div></div>
    <div class="clearfix">
        <div id="show-hide-player" class="rounded">
            <a href="#" id="show-hide-ytplayer">Show/hide player</a>
        </div>
        <div id="wrong-video" class="rounded">
            <a href="#" id="wrong-video-button">Wrong video</a>
        </div>
    </div>
	<div id="playlist-controls" class="clearfix">
		<div id="playlist-save" class="rounded" style="display: block;">
            <a data-controls-modal="save-modal" href="#save-playlist">Save Playlist</a></div>
		<div id="playlist-clear" class="rounded"><a href="#">Clear Playlist</a></div>
	</div>
	<div id="playlist-container" class="rounded songlist">
		<ul id="playlist">

		</ul>
	</div>	
</div>
<div id="save-modal" class="modal hide fade" ng:controller="SavePlaylistCtrl">
    <div class="modal-header">
        <a href="#" class="close">&times;</a>
        <h3>Save playlist</h3>
    </div>
    <div class="modal-body">
        <div>
            <label for="save-playlist-name">Name of playlist: </label> 
            <input type="text" name="playlist_name" id="save-playlist-name" />
            <span class="help-inline" ng:show="empty">Please give your playlist a name</span>
            <div ng:show="success">
                <p>Your playlist was successfully saved.</p>
                <label for="share">Share link:</label>
                <input type="text" name="share" id="share" ng:readonly="success" />
            </div>
        </div>
    </div>
    <div class="modal-footer">
        <a class="btn primary" ng:click="save()">Save</a>
    </div>
</div>
<div id="content-container">
<ng:view></ng:view>
</div>

<!-- JavaScript at the bottom for fast page loading  -->

  <script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
  <script>window.jQuery || document.write('<script src="/public/javascripts/libs/jquery-1.6.2.min.js"><\/script>')</script>


<script type="text/javascript" src="/public/javascripts/libs/angular.js" ng:autobind></script>
<script type="text/javascript" src="/public/javascripts/libs/swfobject.js"></script>
<script type="text/javascript" src="/public/javascripts/libs/jquery-ui-1.8.16.custom.min.js"></script>
<script type="text/javascript" src="/public/javascripts/libs/bootstrap-dropdown.js"></script>
<script type="text/javascript" src="/public/javascripts/libs/bootstrap-modal.js"></script>
<script type="text/javascript" src="/public/javascripts/ngl.js"></script>
<script type="text/javascript" src="/public/javascripts/widgets.js"></script>
<script type="text/javascript" src="/public/javascripts/services.js"></script>
<script type="text/javascript" src="/public/javascripts/controllers.js"></script>
<script>
    angular.service('user', function() {
    return {
        name: '${name ?: ''}'
    };
});
</script>


  <script>
    window._gaq = [['_setAccount','UAXXXXXXXX1'],['_trackPageview'],['_trackPageLoadTime']];
    Modernizr.load({
      load: ('https:' == location.protocol ? '//ssl' : '//www') + '.google-analytics.com/ga.js'
    });
  </script>


  <!-- Prompt IE 6 users to install Chrome Frame. Remove this if you want to support IE 6.
       chromium.org/developers/how-tos/chrome-frame-getting-started -->
  <!--[if lt IE 7 ]>
    <script src="//ajax.googleapis.com/ajax/libs/chrome-frame/1.0.3/CFInstall.min.js"></script>
    <script>window.attachEvent('onload',function(){CFInstall.check({mode:'overlay'})})</script>
  <![endif]-->

</body>
</html>